<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili头图</title>
    <link rel="stylesheet" href="bilibili头图效果.css">
</head>
<body>
    <header>
    <div class="view">
        <img src="image/早晨.jpg" class="morning" alt="">
        <img src="image/中午.jpg" class="afternoon" alt="">
        <video autoplay loop muted class="evening">
            <source src="image/晚上.webm" type="video/webm" /> 
        </video>
        <img src="image/窗户.png" class="window-cover" alt="">
    </div>

     <div class="tree">
        <img src="image/早上的树.png" class="morning" alt="">
        <img src="image/中午的树.png" class="afternoon" alt="">
        <img src="image/晚上的树.png" class="evening" alt="">
    </div>
    </header>

    <script>
        let startingPoint
        const header =document.querySelector('header')
        
        // 当鼠标进入header的时候，将游标的位置记录下来
        header.addEventListener('mouseenter',(e)=> {
            startingPoint = e.clientX
            header.classList.add('moving')
        })

        header.addEventListener('mouseout',(e)=>{
            header.classList.remove('moving')
            header.style.setProperty('--percentage',0.5)
        })
        header.addEventListener('mousemove',(e) =>{
            // 将游标x的位置除以游览器窗口的宽度，这样游标移动到最左的时候是0，
            // 移动到最右边的时候是1.
            let percentage = (e.clientX - startingPoint)/window.outerWidth + 0.5

            //将percentage写入css，然后名字是--percentage
            header.style.setProperty('--percentage',percentage)
        })
    </script>
</body>
</html>